<template>
  <div class="group_item__container base-padding" :style="{'background': bgColor}">
    <div class="item_left">
      {{ titleLeft }}
    </div>
    <div class="item_right" v-if="titleRight !== ''">
      <span class="content">{{ titleRight }}</span>
      <icon :type="iconType" size="1.5" v-if="icon" style="margin-left: 10px;color: #a3d0dd;"></icon>
    </div>
    <slot name="slotTitleRight"></slot>
    <div class="item_other__desc" v-if="orderDesc !== ''">
      <input v-model="descValue" type="text" :placeholder="orderDesc">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'sl-group-item',
  data () {
    return {
      descValue: ''
    }
  },
  props: {
    titleLeft: {
      type: String,
      default: ''
    },
    titleRight: {
      type: String,
      default: ''
    },
    orderDesc: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    icon: {
      type: Boolean,
      default: false
    },
    iconType: {
      type: String,
      default: 'icon-enter'
    }
  },
  mounted () {
    // 为slot插槽添加class
    if (this.$slots.slotTitleRight) {
      this.$slots.slotTitleRight[0].elm.className = 'slot_title__right'
    }
  },
  watch: {
    descValue () {
      this.$emit('descChange', this.descValue)
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  
 .group_item__container
    overflow hidden
    display flex
    justify-content space-between
    align-items center
    font-size 1.4 * .61rem
    border-bottom 1px #ddd solid
    height 5 * .61rem
   .slot_title__right
     span, small
       display block
       text-align right
       font-size $sl_font_size_small
     small
       color $sl_font_color_desc
       color $sl_font_color_desc
       padding-top 5px
   .item_other__desc
     color $sl_font_color_desc_s
     input
       width 14 * .61rem
       font-size $sl_font_size_14
   .item_right
     .content
       max-width 6rem
       overflow hidden
       text-overflow ellipsis
       -webkit-line-clamp 1
       white-space nowrap
       display inline-block
</style>
